<template>
	<div>
		<!-- 头部 -->
		<div class="f-heard">
			<el-card>
				<div class="f-heard-card">
					<div class="f-heard-type">
						<el-button type="text">{{ $t('message.message.title1') }}</el-button>
						<el-button type="text">{{ $t('message.message.title2') }}</el-button>
						<el-button type="text">{{ $t('message.message.title3') }}</el-button>
						<el-button type="text">{{ $t('message.message.title4') }}</el-button>
						<el-button type="text">{{ $t('message.message.title5') }}</el-button>
					</div>
					<div class="f-heard-search">
						<el-input class="f-heard-search-input" placeholder="请输入内容"></el-input>
						<el-button icon="el-icon-search" type="primary" size="small" plain></el-button>
						<el-button type="primary" size="small" plain>高级检索</el-button>
					</div>
					<div class="f-heard-personal">
						<el-button type="text">{{ $t('message.message.title6') }}</el-button>
						<el-button type="text">{{ $t('message.message.title7') }}</el-button>
						<el-button type="text">{{ $t('message.message.title8') }}</el-button>
						<el-button type="text">{{ $t('message.message.title9') }}</el-button>
						<el-button type="text">{{ $t('message.message.title10') }}</el-button>
					</div>
				</div>
			</el-card>
		</div>
		<!-- 主体区域 -->

		<div class="f-body">
			<!-- 左边 -->
			<div class="f-body-left">
				<el-card shadow="hover">
					<el-card class="f-body-left-card" shadow="never" v-for="(item, index) in allPostInfo" :key="index">
						<h2 class="f-body-left-title">{{ item.forumPostTitle }}</h2>
						<div class="f-body-left-cot">简介</div>
						<div class="f-body-left-btn">
							<p>点击：{{ item.forumPostHits }}</p>
							<p>收藏：{{ item.forumPostCollect }}</p>
							<p>阅读量:{{ item.forumPostView }}</p>
							<p>{{ item.name }}</p>
						</div>
					</el-card></el-card
				>
			</div>

			<!-- 右边 -->
			<div class="f-body-right"><el-card shadow="hover">推荐</el-card></div>
		</div>
	</div>
</template>

<script>
import { getAllForumPost } from '@/api/forumPostModular/index.js';
export default {
	name: 'forum',
	data() {
		return {
			allPostInfo: [],
		};
	},
	created() {
		this.getAllForumPostInfo();
	},
	methods: {
		async getAllForumPostInfo() {
			let res = await getAllForumPost();
			if (res.statusCode === 20000) {
				this.allPostInfo = res.data.records;
			}
		},
	},
};
</script>

<style scoped lang="scss">
.f-heard {
	margin-bottom: 16px;
}
.f-body {
	display: flex;
}
.f-body-left {
	width: 70%;
}
.f-body-right {
	width: 29%;
	margin-left: 1%;
}
.f-body-left-card {
	cursor: pointer;
}
.f-body-left-title {
	&:hover {
		color: #175199;
	}
}
.f-body-left-cot {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #555666;
}
.f-body-left-btn {
	display: flex;
	p {
		color: #555666;
		margin-right: 10px;
		&:hover {
			color: #999aaa;
		}
	}
}
.f-heard-card {
	display: flex;
	justify-content: space-between;
}
.f-heard-search {
	display: flex;
	.f-heard-search-input {
		margin-right: 10px;
	}
}
.f-heard-type {
	button {
		color: #555666;
		&:hover {
			color: #999aaa;
		}
	}
}
.f-heard-personal {
	button {
		color: #555666;
		&:hover {
			color: #999aaa;
		}
	}
}
</style>
